<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2018/1/9
  Time: 16:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
    <%@include file="/include/head.jsp"%>
    <title>登录</title>
    <script src="${rootPath}/static/js/login.js"></script>
    <script type="text/javascript">
        //页面基础配置
        $(function(){
            initLogin();
        });
    </script>

    <style type="text/css">
        .loginBtn{
            border-radius: 60px;
            margin-top: 60px;
        }
        .border-bottom-black{
            border-color: #555555;
        }

    </style>
</head>
<body style="background-color: #fff">
<header class="mui-bar mui-bar-nav qy-bg-white">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left qy-text-black"></a>
    <h1 class="mui-title qy-headerInputBox">
        登录
    </h1>
</header>
<div class="mui-content qy-bg-white" >
    <form action="" id="loginForm">
    <div id="mainBox" class="qy-padding-vertical-30px qy-margin-top-16px">
        <div class="qy-margin-bottom-16px">
            <span v-on:click="changeType(0)" :class="{'qy-text-label':loginType==1}" class="qy-margin-right-16px">密码登录</span>
            <span v-on:click="changeType(1)" :class="{'qy-text-label':loginType==0}">验证码登录</span>
        </div>
        <div v-if="loginType==0">
        <small class="qy-text-label mui-block">用户名/手机号</small>
        <div :class="{'border-bottom-black':loginTypeOneUserName.length>0}" class="qy-border-bottom qy-flex qy-flex-fullHeight qy-flex-text-between">
            <div class="mui-col-xs-10">
                <input v-model="loginTypeOneUserName" type="text" class="qy-no-margin qy-no-padding qy-no-border qy-bg-white">
            </div>
            <div class="qy-flex mui-col-xs-2 qy-flex-text-right">
                <span v-on:click="clearTxt" v-if="loginTypeOneUserName.length>0" class="mui-icon mui-icon-close-filled qy-font-size-20px"></span>
            </div>
        </div>
        <small class="qy-margin-top-16px mui-block qy-text-label">密码</small>
        <div :class="{'border-bottom-black':loginTypeOnePassword.length>0}" class="qy-border-bottom qy-flex qy-flex-fullHeight qy-flex-text-between">
            <div class="mui-col-xs-10">
                <input v-if="!passwordShow" v-model="loginTypeOnePassword" type="password" class="qy-no-margin qy-no-padding qy-no-border qy-bg-white">
                <input v-else v-model="loginTypeOnePassword" type="text" class="qy-no-margin qy-no-padding qy-no-border qy-bg-white">
            </div>
            <div class="qy-flex mui-col-xs-2 qy-flex-text-right">
                <img v-if="loginTypeOnePassword.length>0&&passwordShow" v-on:click="showPassword" src="${rootPath}/static/imgs/openEyes.png" style="width: 20px;" alt="">
                <img v-if="loginTypeOnePassword.length>0&&!passwordShow" v-on:click="showPassword" src="${rootPath}/static/imgs/closeEyes.png" style="width: 20px;" alt="">
            </div>
        </div>
        </div>
        <div v-else>
            <small class="qy-text-label mui-block">手机号</small>
            <div :class="{'border-bottom-black':loginTypeOneUserName.length>0}" class="qy-border-bottom qy-flex qy-flex-fullHeight qy-flex-text-between">
                <div class="mui-col-xs-10">
                    <input v-model="loginTypeOneUserName" type="text" class="qy-no-margin qy-no-padding qy-no-border qy-bg-white">
                </div>
                <div class="qy-flex mui-col-xs-2 qy-flex-text-right">
                    <span v-on:click="clearTxt" v-if="loginTypeOneUserName.length>0" class="mui-icon mui-icon-close-filled qy-font-size-20px"></span>
                </div>
            </div>
            <small class="qy-margin-top-16px mui-block qy-text-label">验证码</small>
            <div :class="{'border-bottom-black':loginTypeTwoCode.length>0}" class="qy-border-bottom qy-flex qy-flex-fullHeight qy-flex-text-between">
                <div class="mui-col-xs-9">
                    <input v-model="loginTypeTwoCode" type="text" class="qy-no-margin qy-no-padding qy-no-border qy-bg-white">
                </div>
                <div class="qy-flex mui-col-xs-3 qy-flex-text-right">
                    <small class="qy-text-label">获取验证码</small>
                </div>
            </div>
        </div>
        <div class="qy-flex qy-flex-text-between qy-margin-top-4px">
            <a href="" class="qy-font-size-14px">忘记密码?</a>
            <a href="" class="qy-font-size-14px">注册</a>
        </div>

        <div v-on:click="goLogin" :class="{'qy-bg-grayc':((loginTypeOnePassword.length==0||loginTypeOneUserName.length==0)&&loginType==0)||((loginTypeOneUserName.length==0||loginTypeTwoCode.length==0)&&loginType==1),'qy-bg-blue':(loginTypeOnePassword.length>0&&loginTypeOneUserName.length>0&&loginType==0)||(loginTypeTwoCode.length>0&&loginTypeOneUserName.length>0&&loginType==1)}" class="loginBtn qy-padding-horizontal-12px qy-text-white qy-font-size-16px qy-flex qy-flex-text-center"
        >
                登录
        </div>

    </div>
    </form>
</div>


</body>
</html>
